<template>
  <el-container>
    <div class="head">
      <head-container></head-container>
    </div>
    <el-main>
      <section class="shop_car_main">
        <h2><span>全部商品</span></h2>
        <el-table
          ref="multipleTable"
          :data="carList"
          tooltip-effect="dark"
          style="width: 100%"
          @select='select'
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="60">
          </el-table-column>
          <el-table-column
            label="商品信息"
            width="500">
            <template slot-scope="scope">
              <div class="clearfix">
                <span style="float:left"><img class="shop_item_pic" :src="scope.row.image" alt="图片加载失败"></span>
                <span style="float:left;width:300px;">{{ scope.row.product || scope.row.course}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="price"
            label="单价">
          </el-table-column>
          <el-table-column
            label="数量">
            <template slot-scope="scope">
              <el-input-number
                :min="1"
                :max="50"
                size="mini"
                @change='changeNum($event, scope.row.id )'
                v-model="scope.row.quantity"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column
            label="金额">
            <template slot-scope="scope"><span  class="total_price">￥{{ scope.row.total}}</span></template>
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="deleteRow(scope.$index, scope.row.id)"
                type="text"
                size="small">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="to_buy">
          <div class="choose_num">
            已选商品<span class="color">{{multipleSelection.length}}</span>件
          </div>
          <div class="totalA_price">
            合计（不含运费）：￥<span class="color">{{totalPrice}}</span>
          </div>
          <el-button class="go_sure" @click="sureOrder">
            <div>去结算</div>
          </el-button>
        </div>
       </section>
    </el-main>
    <el-footer>
       <foot-container></foot-container>
    </el-footer>
  </el-container>
</template>
<script>
import headContainer from '../components/headContainer'
import footContainer from '../components/footContainer'
export default {
  name:'shopCar',
  components:{
    headContainer,
    footContainer
  },
  data(){
    return{
      carList: [],
      multipleSelection: [],
      totalPrice:0
    }
  },
  mounted(){
    this.getCarList();
    this.getTotalPrice(this.multipleSelection)
  },
  methods:{
    getTotalPrice(selection){
      this.GLOBAL.tokenRequest({
        method:'post',
        baseURL:this.GLOBAL.RNTY_SHOP_MALL_URL,
        url:'carts/cal',
        data:{
          id:selection.map(item=>item.id)//商品id数组
        }
      }).then(({data:data})=>{
        this.totalPrice = data;
      })
    },
    getCarList(){
      this.GLOBAL.tokenRequest({
          method:"post",
          baseURL:this.GLOBAL.RNTY_SHOP_MALL_URL,
          url:"carts/show",
          data: {
            uid:2
          }
        }).then(({data:data})=>{
          this.carList = data
        })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.getTotalPrice(val)
    },
    select(selection,row){
      this.getTotalPrice(selection)
    },
    deleteRow(index,id){
      this.carList.splice(index,1)
      this.GLOBAL.tokenRequest({
          method:"post",
          baseURL:this.GLOBAL.RNTY_SHOP_MALL_URL,
          url:"carts/del",
          data: {
            id
          }
        }).then(({data:data})=>{
          if(!data){
            // console.log('删除失败')
            this.getCarList()
          }
        })
    },
    sureOrder(){
      let id = [];
      this.multipleSelection.forEach(item => {
        id.push(item.id)
      });
      if(this.multipleSelection.length){
        this.$router.push({name:'Order',params:{id}})
      }
    },
    changeNum(quantity,id){
      this.GLOBAL.tokenRequest({
        method:'post',
        baseURL:this.GLOBAL.RNTY_SHOP_MALL_URL,
        url:'carts/change',
        data:{
          id,
          quantity
        }
      }).then(({data:data})=>{
        this.getCarList()
        if(!data){
          // console.log('更改数量失败')
          return
        }
        if(this.multipleSelection.length){
          this.getTotalPrice(this.multipleSelection)
        }
      })
    }
  },

}
</script>
<style>
.head{
  height: 156px;
}
.shop_car_main{
  width:1200px;
  min-height:580px;
  margin:20px auto;
  text-align: left;
  font: 14px/20px "微软雅黑";
  color:#666666;
}
.shop_car_main h2{
  border-bottom:2px solid #0078c5;
}
.shop_car_main h2 span{
  height:30px;
  display: inline-block;
  padding: 0 8px;
  color:#fff;
  font:18px/30px "微软雅黑";
  background-color:#0078c5;
}
.el-row{
  margin:0 !important;
}
.shop_car_nav{
  margin-bottom: 20px;
  border-bottom: 2px solid #000000
}
.car-list_item{
  height:100px;
  line-height: 100px;
}
.del_car-item{
  color:red;
  cursor: pointer;
}
.el-footer{
  height:127px !important;
  padding:0 !important;
}
.shop_item_pic{
  width:140px;
  height:100px;
}
.total_price{
  color:#ff7200;
}
.go_sure{
  margin-left:20px;
  background-color: #ff6d00;
  color:#fff;
}
.go_sure:hover{
  color:#fff;
  background-color: #ff6d00;
}
.to_buy{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top:20px;
  background-color: #f9f9f9;
}
.totalA_price{
  margin-left: 20px;
}
.color{
  color:#ff7200;
  padding:0 5px;
  font-size: 20px;
}
.clearfix:after{
      content:"";
      display: block;
      clear: both;
  }
/* IE 6/7 */
.clearfix {
    zoom: 1;
 }
</style>

